import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:sainbainu/common/models/response/feedback_response.dart';
import 'package:sainbainu/common/values/colors.dart';
import 'package:sainbainu/common/widgets/widget.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

import 'index.dart';
import 'widgets/widgets.dart';

class FeedbackPage extends GetView<FeedbackController> {
  const FeedbackPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<FeedbackController>(
      builder: (_) {
        return Scaffold(
          appBar: AppBar(title: Text("用户反馈".tr)),
          body: EasyRefresh.builder(
            controller: _.state.refreshController,
            onRefresh: _.onRefresh,
            onLoad: _.onRichBottom,
            childBuilder: (context, physics) {
              return _buildBody(physics);
            },
          ),
          bottomNavigationBar: _buildBottomBtn(),
        );
      },
    );
  }

  /// 列表
  Widget _buildBody(ScrollPhysics physics) {
    return GetBuilder<FeedbackController>(
      id: 'list',
      builder: (_) {
        return ListView.separated(
          physics: physics,
          itemCount: _.state.feedbackResponse.rows.length,
          padding: const EdgeInsets.all(0),
          separatorBuilder: (context, index) {
            return const SizedBox(height: 10);
          },
          itemBuilder: (context, index) {
            var item = _.state.feedbackResponse.rows[index];
            return _buildItemCard(item);
          },
        );
      },
    );
  }

  /// 列表每一项
  Widget _buildItemCard(FeedbackItemResponse item) {
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.all(sidePadding),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(item.feedbackContent ?? ''),
          if (item.images != null && item.images!.isNotEmpty)
            Container(
              height: itemHeight,
              margin: const EdgeInsets.only(top: 10),
              child: GridView.count(
                crossAxisCount: 3,
                crossAxisSpacing: crossAxisSpacing,
                childAspectRatio: controller.state.itemRatio,
                padding: const EdgeInsets.all(0),
                physics: const NeverScrollableScrollPhysics(),
                children: item.images!
                    .map(
                      (url) => _buildItemImage(url, item.images!),
                    )
                    .toList(),
              ),
            ),
          _buildCreateTime(createTime: item.createTime ?? ''),
          _buildReply(item)
        ],
      ),
    );
  }

  /// 创建时间
  Widget _buildCreateTime({
    required String createTime,
    double paddingTop = 10,
  }) {
    return Padding(
      padding: EdgeInsets.only(top: paddingTop),
      child: Text(
        createTime,
        style: const TextStyle(
          color: AppColors.unactive3,
          fontSize: 12,
        ),
      ),
    );
  }

  /// 图片每一项
  Widget _buildItemImage(String url, List<String> images) {
    return GestureDetector(
      onTap: () => controller.handlePreviewList(url, images),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
        ),
        clipBehavior: Clip.antiAlias,
        child: CustomImage(
          url: url,
        ),
      ),
    );
  }

  /// 系统回复
  Widget _buildReply(FeedbackItemResponse item) {
    if (item.replyContent == null || item.replyContent!.isEmpty) {
      return const SizedBox.shrink();
    }
    return Container(
      margin: const EdgeInsets.only(top: 10),
      padding: const EdgeInsets.all(10),
      width: double.infinity,
      decoration: BoxDecoration(
        color: AppColors.page,
        borderRadius: BorderRadius.circular(6),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text.rich(TextSpan(
            children: [
              TextSpan(
                text: '【${'系统回复'.tr}】',
                style: const TextStyle(
                  color: AppColors.danger,
                ),
              ),
              TextSpan(text: item.replyContent),
            ],
          )),
          _buildCreateTime(createTime: item.replyTime ?? '', paddingTop: 6),
        ],
      ),
    );
  }

  /// 我要反馈按钮
  Widget _buildBottomBtn() {
    return BottomAppBar(
      color: Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 15),
      height: kBottomNavigationBarHeight,
      child: Row(
        children: [
          Expanded(
            child: ElevatedButton(
              onPressed: () => _hanldeShowFeedbackPopup(),
              style: ElevatedButton.styleFrom(
                backgroundColor: AppColors.danger,
                foregroundColor: Colors.white,
                enableFeedback: true,
              ),
              child: Text('我要反馈'.tr),
            ),
          ),
        ],
      ),
    );
  }

  /// 显示反馈弹窗
  _hanldeShowFeedbackPopup() {
    showBarModalBottomSheet(
      context: Get.context!,
      builder: (context) => KeyboardClose(
        child: FeedbackCreate(
          onSubmit: () => controller.handleSubmit(),
        ),
      ),
    );
  }
}
